<template>
    <div class="qht">
    <header>
      <hoomnavbar :active-index="2"/>
    </header>
    <main>
        <article class="banner-wrap">
            <div class="banner-pic-wrap">
                <img src="../../assets/imgs/product/ipsystem/ipsystem_banner_pic.jpg" alt="">
            </div>
            <div class="banner-tips animater-el" data-animater="animate__fadeInDown">
                <img src="../../assets/imgs/product/ipsystem/banner_tips.png" alt="">
            </div>
        </article>
        <article class="introduce-wrap">
            <div class="introduce-bg">
                <img class="introduce-bg1" src="../../assets/imgs/product/product_bg1.png" alt="">
                <img class="introduce-bg2" src="../../assets/imgs/product/product_bg2.png" alt="">
            </div>
            <div class="introduce-container">
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/ipsystem/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/ipsystem/01.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/ipsystem/introduce_pic_1.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>分享展示，宣传推广</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                对商家产品进行包装展示，吸引客户浏览分享，刺激客户线下到店消费，实现可持续性拓客引流
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/ipsystem/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/ipsystem/02.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/ipsystem/introduce_pic_2.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>社交互动，IP打造</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                为员工及客户提供一个分享展示的平台，员工、会员、商家之间可以在线互动，互动产生交易，互动增强粘性
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/ipsystem/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/ipsystem/03.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/ipsystem/introduce_pic_3.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>在线预约，精准匹配</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                客户可以选择心仪的员工/门店进行在线预约，老板及员工还可以进行“预约时间设置”休息期间客户无法预约，实现资源精准匹配
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/ipsystem/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/ipsystem/04.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/ipsystem/introduce_pic_4.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>用户洞察，精准营销</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                店长及员工均可以查看个人粉丝及评价，通过社交互动更加深入了解客户需求，查漏补缺，提升服务质量，实现精准营销
                            </p>
                        </div>
                    </div>
                </div>
                <div class="introduce-item">
                    <div class="bg-wrap">
                        <img class="circle-bg" src="../../assets/imgs/product/ipsystem/introduce_bg.png" alt="">
                        <img class="number-bg" src="../../assets/imgs/product/ipsystem/05.png" alt="">
                    </div>
                    <div class="introduce-content">
                        <div class="introduce-content-top animater-el" data-animater="animate__zoomIn">
                            <img src="../../assets/imgs/product/ipsystem/introduce_pic_5.png" alt="">
                        </div>
                        <div class="introduce-content-bottom">
                            <div class="introduce-content-caption animater-el" data-animater="animate__fadeInDown">
                                <b>1v1个性化按需定制</b>
                            </div>
                            <p class="animater-el" data-animater="animate__fadeInDown">
                                根据企业的不同需求场景，添加相应的营销功能版块，个性化定制IP系统，助力企业深挖无限盈利可能！
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </main>
    <footer>
      <hoomfooter/>
    </footer>
    </div>
</template>
<script>
import Observer from '../../utils/observer.js'
import hoomnavbar from '@/components/hoomnavbar.vue'
import hoomfooter from '@/components/hoomfooter.vue'
export default {
    name: 'Home',
    components: {
        hoomnavbar,
        hoomfooter,
    },
     data(){
        return{
            observer:'',
        }
    },
    mounted(){
        const els2 = document.querySelectorAll('.animater-el')
        this.observer = Observer({
                els:els2,
                threshold:0.2
            },(el)=>{
                const classStr = el.dataset.animater.split(',');
                const delay = el.dataset.delay;
                if(delay) return setTimeout(()=>{
                    el.style.visibility = 'visible';
                    el.classList.add(classStr[0])
                },400)
                el.style.visibility = 'visible';
                el.classList.add(classStr[0])
            })
    },
    beforeDestroy(){
        this.observer && window.removeEventListener('scroll',this.observer)
    },
}
</script>
<style lang="less" scoped>
@import '../../assets/css/variable.less';
.banner-wrap{
    .banner-pic-wrap{
        height: 700 * @crem;
       position: relative;
       overflow: hidden;
        img{
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            // height: 100%;
            min-width: 90%;
            object-fit: cover;
            height: 100%;
        }
    }
    .banner-tips{
        margin-top: 40px;
        height: 132 * @crem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 85 * @crem;
        img{
            height: 100%;
        }
    }
}
.introduce-wrap{
    position: relative;
    padding-top: 154 * @crem;
    padding-bottom: 300 * @crem;
    .introduce-container{
        width: 1440 * @crem;
        margin: 0 auto;
        display: flex;
        flex-flow: row wrap;
        // justify-content: space-between;
        justify-content: center;

    }
    .introduce-item{
        width: 655 * @crem;
        height: 815 * @crem;
        border-radius: 50 * @crem;
        position: relative;
        background-color: #fff;
        .bg-wrap{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50 * @crem;
            overflow: hidden;
            z-index: 0;
            .circle-bg{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;

            }
            .number-bg{
                position: absolute;
                top: 47 * @crem;
                right: 40 * @crem;
                width: 292 * @crem;
                height: 246 * @crem;
            }
        }
        .introduce-content{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50 * @crem;
            z-index: 5;
            

            .introduce-content-top{
                height: 512 * @crem;
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    width: 453 * @crem;
                    height: 404 * @crem;
                }
            }
            .introduce-content-bottom{
                box-sizing: border-box;
                padding-left: 107 * @crem;
                padding-right: 95 * @crem;
                .introduce-content-caption{
                    height: 88 * @crem;
                    line-height: 88 * @crem;
                    font-size: 44 * @crem;
                    color: #F65049;
                    font-weight: 500;
                    text-align: left;
                    white-space: nowrap;
                    border-bottom: 1px dashed #F54E47;
                }
                p{
                    margin-top: 21 * @crem;
                    color: #4E4E4E;
                    font-size: 24 * @crem;
                    line-height: 36 * @crem;
                    text-align: left;
                }
            }
        }
    }
    .introduce-item:nth-child(n+3){
        margin-top: 278 * @crem;
    }
    .introduce-item:nth-child(2n-1){
        margin-right: 130 * @crem;
    }
    .introduce-item::before{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 53 * @crem;
        left: -24 * @crem;
        border-radius: 50 * @crem;
        border: 1px dashed  #F54E47;
        z-index: -2;
        background: #fff;

    }
    .introduce-item:nth-child(1){
        .introduce-content-top img{
             width: 350 * @crem;
        }
    }
    .introduce-item:nth-child(3){
        .introduce-content-top img{
            //  width: 453 * @crem;
            height: 350 * @crem;

        }
    }
    .introduce-item:nth-child(4){
        .introduce-content-top img{
            //  width: 453 * @crem;
            height: 300 * @crem;

        }
    }
    .introduce-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -5;
        .introduce-bg1{
            width: 100%;
            height: 1048 * @crem;
            margin-top: 386 * @crem;
        }
        .introduce-bg2{
            width: 100%;
            height: 1048 * @crem;
            margin-top: 614 * @crem;
        }
    }
}
    
</style>